body {
		padding: 0;
		margin: 0;
		background-color: #333632;
	
	}



	.a {
		margin: 0 auto;
		align-items: center;
		justify-content: center;
		position: relative;
		top: 100px;
		width: 1000px;
		height: 600px;
		border: 10px solid white;
		background-image: url("../img/05.png");
		background-size: cover;
		display: flex;
		justify-content: center;
		/* align-items: center; */
		overflow: hidden;
 visibility: hidden; /* 隐藏文本元素 */
	   animation: tu1 3s ease-in forwards; /* 播放动画，持续3秒，缓动效果为ease-in，持续结束时停留在最后一帧 */
	
	}
@keyframes tu1 {
  0% {
	  opacity: 0;
    visibility: hidden; /* 第一帧隐藏文本元素 */
  }
  100% {
	  opacity: 1;
    visibility: visible; /* 最后一帧显示文本元素 */
  }
}


	.b,
	.c,
	.d,
	.e {
		position: absolute;
		width: 500px;
		height: 600px;
		background-image: url("../img/06.png");
		background-color: #323232;
		/* filter: drop-shadow(4px 4px 12px rgb(0, 0, 255)); */
		background-size: cover;
		opacity: 0.5;
		transition: 2.5s;
	}

	.b {
		left: 0;
		clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 65% 0%);
		background-position: -100px 0;
	}

	.c {
		left: 0;
		clip-path: polygon(0% 0%, 0% 100%, 70% 100%, 90% 0%);
		background-position: -100px 0;
	}

	.d {
		right: 0;
		clip-path: polygon(0% 0%, 40% 100%, 100% 100%, 100% 0%);
		background-position: 500px 0;
	}

	.e {
		right: 0;
		clip-path: polygon(20% 0%, 0% 100%, 100% 100%, 100% 0%);
		background-position: 500px 0;
	}

	.a:hover .b {
		left: -200px;
	}

	.a:hover .c {
		left: -150px;
	}

	.a:hover .d {
		right: -140px;
	}

	.a:hover .e {
		right: -220px;
	}

	.a:hover div {
		opacity: 1;
	}

	.f {
		opacity: 0;
		font: 900 50px '宋体';
		letter-spacing: 10px;
		color: #ffaa7f;
		transition: 2s;


	}

	.f:hover {
		opacity: 1;
		transform: translateY(-280px);
	}

	

	.btn1 {
		height: 30px;
		opacity: 0.3;
		top: 0;
		width: 200px;
		position: absolute;
		margin-top: 25%;
		cursor:pointer;
		letter-spacing: 10px;
		background-color: #8b5c45;
		transition: 1s;
		visibility: hidden; /* 隐藏文本元素 */
		  animation: float-text 2s ease-in forwards; /* 播放动画，持续3秒，缓动效果为ease-in，持续结束时停留在最后一帧 */
		
	}
	.btn3 {
		height: 50px;
		opacity: 0.3;
		top: 0;
		width: 200px;
		cursor:pointer;
		position: absolute;
		margin-top: 15%;
		letter-spacing: 10px;
		background-color: #afafaf;
		transition: 1s;
		visibility: hidden; /* 隐藏文本元素 */
		  animation: three 2s ease-in forwards; /* 播放动画，持续3秒，缓动效果为ease-in，持续结束时停留在最后一帧 */
		
	}
	@keyframes two {
	  0% {
	    visibility: hidden; /* 第一帧隐藏文本元素 */
	    transform: translateY(900%); /* 文本元素向下平移100% */
	  }
	  100% {
	    visibility: visible; /* 最后一帧显示文本元素 */
	    transform: translateY(0); /* 文本元素不再平移 */
	  }
	}
@keyframes float-text {
  0% {
    visibility: hidden; /* 第一帧隐藏文本元素 */
    transform: translateX(-200%); /* 文本元素向下平移100% */
  }
  100% {
    visibility: visible; /* 最后一帧显示文本元素 */
    transform: translateX(0); /* 文本元素不再平移 */
 opacity: 1;
  }
}
@keyframes three {
  0% {
    visibility: hidden; /* 第一帧隐藏文本元素 */
    transform: translateY(-900%); /* 文本元素向下平移100% */
 opacity: 1;
  }
  100% {
	  opacity: 1;
    visibility: visible; /* 最后一帧显示文本元素 */
    transform: translateY(0); /* 文本元素不再平移 */
  }
}

	.btn2 {
		height: 40px;
		width: 200px;
		opacity: 0.4;
		top: 0;
		position: absolute;
		margin-top: 35%;
		cursor:pointer;
		letter-spacing: 10px;
		background-color:#abd0af ;
		transition: 1s;
		visibility: hidden; /* 隐藏文本元素 */
		  animation: two 2s ease-in forwards; /* 播放动画，持续3秒，缓动效果为ease-in，持续结束时停留在最后一帧 */
		
	}
.footer img{
	height:90% ;
	border-radius: 50px;
}
	.footer{
		         height: 40px;
		                line-height: 40px;
		                position: fixed;
		                bottom: 0;
		                width: 100%;
		                text-align: center;
		                background: #333;
		                color: #fff;
		                font-family: Arial;
		                font-size: 12px;
		                letter-spacing: 1px;
	}

	.btn1:hover {
		opacity: 1;

	}

	.btn2:hover {
		opacity: 1;

	}
	.btn3:hover {
		opacity: 1;
	
	}
